<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:rich="http://richfaces.ajax4jsf.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<body>                      
<ui:composition>

	<h:form id="select_form">
		<rich:panel>
			<f:facet name="header">Play list</f:facet>
			<rich:dataTable value="#{playListAction.plays}" var="play" rows="5" rowKeyVar="rowIdx" width="100%"
				id="playList"> 
	        <rich:column width="10%">
	            <f:facet name="header">Order</f:facet>
	            <h:outputText value="#{rowIdx +1}"/>
	        </rich:column>
	
	        <rich:column width="30%">
	            <f:facet name="header">Type</f:facet>
	            <h:outputText rendered="#{play.getClass().getSimpleName()=='SongPlay'}">Song</h:outputText>
	            <h:outputText rendered="#{play.getClass().getSimpleName()=='WeatherPlay'}">Weather Forecast</h:outputText>
	        </rich:column>
	
	        <rich:column width="50%">
	            <f:facet name="header">Options</f:facet>
	            <ui:include src="options_render.xhtml">
	            	<ui:param name="play" value="#{play}"/>
	            </ui:include>
	        </rich:column>
	        
	        <rich:column width="10%">
	            <f:facet name="header">Actions</f:facet>
	           	<!--  Down arrow -->
	            <a4j:commandButton image="/img/down_16.png" action="#{playListAction.moveDown(play)}"
	             reRender="selectList" rendered="#{rowIdx +1 != playListAction.plays.size }" />
	            <!-- Up arrow -->
	            <a4j:commandButton image="/img/up_16.png" action="#{playListAction.moveUp(play)}" 
	            	reRender="selectList" rendered="#{rowIdx  != 0}" />
	            <a4j:commandButton image="/img/close_16.png" action="#{playListAction.remove(play)}" 
	            	reRender="selectList" />	            	

	        </rich:column>	        
	        
  		  </rich:dataTable>
		
		</rich:panel>

	</h:form>



                

</ui:composition>

</body>

</html>